<template>
  <div class="w-full min-h-screen bg-gray-50 relative">
    <div class="bg-white border-b border-gray-100">
      <div class="flex items-center justify-between px-4 py-3">
        <div class="flex items-center">
          <button @click="$router.back()" class="mr-4 text-gray-600">
            <i class="fas fa-arrow-left"></i>
          </button>
          <h1 class="text-lg font-semibold text-gray-800">隐私设置</h1>
        </div>
      </div>
    </div>

    <div class="px-4 py-6 pb-20">
      <div class="bg-white rounded-lg shadow-sm">
        <div class="p-4 border-b border-gray-100">
          <h3 class="font-semibold text-gray-800 mb-2">观看记录</h3>
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <span class="text-gray-700">隐藏观看历史</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input v-model="privacySettings.hideWatchHistory" type="checkbox" class="sr-only peer" />
                <div
                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
                ></div>
              </label>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-gray-700">不保存搜索记录</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input v-model="privacySettings.noSearchHistory" type="checkbox" class="sr-only peer" />
                <div
                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
                ></div>
              </label>
            </div>
          </div>
        </div>

        <div class="p-4 border-b border-gray-100">
          <h3 class="font-semibold text-gray-800 mb-2">数据收集</h3>
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <span class="text-gray-700">个性化推荐</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input v-model="privacySettings.personalizedRec" type="checkbox" class="sr-only peer" />
                <div
                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
                ></div>
              </label>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-gray-700">观看数据统计</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input v-model="privacySettings.watchStats" type="checkbox" class="sr-only peer" />
                <div
                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
                ></div>
              </label>
            </div>
          </div>
        </div>

        <div class="p-4 border-b border-gray-100">
          <h3 class="font-semibold text-gray-800 mb-2">账户安全</h3>
          <div class="space-y-3">
            <button class="w-full p-3 text-left bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
              <div class="flex items-center justify-between">
                <span class="text-gray-700">修改密码</span>
                <i class="fas fa-lock text-gray-500"></i>
              </div>
            </button>
            <button class="w-full p-3 text-left bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
              <div class="flex items-center justify-between">
                <span class="text-gray-700">绑定手机号</span>
                <i class="fas fa-mobile-alt text-gray-500"></i>
              </div>
            </button>
            <button class="w-full p-3 text-left bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
              <div class="flex items-center justify-between">
                <span class="text-gray-700">第三方账号绑定</span>
                <i class="fas fa-link text-gray-500"></i>
              </div>
            </button>
          </div>
        </div>

        <div class="p-4">
          <h3 class="font-semibold text-gray-800 mb-2">数据管理</h3>
          <div class="space-y-3">
            <button class="w-full p-3 text-left bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
              <div class="flex items-center justify-between">
                <span class="text-gray-700">导出个人数据</span>
                <i class="fas fa-download text-gray-500"></i>
              </div>
            </button>
            <button class="w-full p-3 text-left bg-red-50 rounded-lg hover:bg-red-100 transition-colors">
              <div class="flex items-center justify-between">
                <span class="text-red-600">删除账户</span>
                <i class="fas fa-trash-alt text-red-500"></i>
              </div>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const privacySettings = ref({
  hideWatchHistory: false,
  noSearchHistory: false,
  personalizedRec: true,
  watchStats: true
})
</script>
